<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Connection Example for FreeGroup Draw2D 0.9.26</title>
        <link type="text/css" rel="stylesheet" href="../demo.css" />

    <!-- common, all times required, imports -->        <SCRIPT src='../../wz_jsgraphics.js'></SCRIPT>      <SCRIPT src='../../mootools.js'></SCRIPT>      <SCRIPT src='../../moocanvas.js'></SCRIPT>      <SCRIPT src='../../draw2d.js'></SCRIPT>


    <!-- example specific imports -->
	<SCRIPT src="Start.js"></SCRIPT>
	<SCRIPT src="End.js"></SCRIPT>
	<SCRIPT src="DecoratedConnection.js"></SCRIPT>
	<SCRIPT src="MyInputPort.js"></SCRIPT>
	<SCRIPT src="MyOutputPort.js"></SCRIPT>
	<SCRIPT src="BranchConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="CrossConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="PolygonConnectionDecorator.js"></SCRIPT>
</head>
<body onselectstart="return false;" style="margin:0px;padding:0px;" onkeydown="">
<div id="paintarea" style="position:absolute;left:0px;top:0px;width:3000px;height:3000px" >
    <!-- The information help text -->
    <div class="stickyNote">
    <center><b>Draw2D 0.9.26 - A simple diagram drawing demo<br>
    by Andreas Herz (a.herz @ freegroup.de)
    <br>
    </b>
    <br>
    <div style="color:red;font-size:9pt">Focus of this example: How to use connection decorations.</div>
    </center>
    <br>
    <center>See more on <a href="http://www.draw2d.org">FreeGroup Draw2D 0.9.26</a></center>
    </div>

</div>
<script>
  // Create an interactive Canvas
  //
  var workflow  = new draw2d.Workflow("paintarea");

  // Add an simple annotation to the canvas
  //
  var annotation = new draw2d.Annotation("NOTE: Drag&Drop the red port to any blue port to create a connection with arrow decoration.");
  annotation.setDimension(300,70);
  workflow.addFigure(annotation,100,200);


  // Add the start,end,connector to the canvas
  //
  var startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,200);
  var endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,250);
  // Create a Connection
/*
  var c = new Connection();
  c.setRouter(new NullConnectionRouter());
  c.setSource(startObj.getPort("output"));
  c.setTarget(endObj.getPort("input"));
  c.setTargetDecorator(new ArrowConnectionDecorator());
  workflow.addFigure(c);
*/

  // Add the start,end,connector to the canvas
  //
  startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,290);
  endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,320);
  // Create a Connection
  var c = new draw2d.Connection();
  c.setRouter(new draw2d.BezierConnectionRouter());
  c.setSource(startObj.getPort("output"));
  c.setTarget(endObj.getPort("input"));
  c.setTargetDecorator(new draw2d.ArrowConnectionDecorator());
  workflow.addFigure(c);

  // Add the start,end,connector to the canvas
  //
  var startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,400);
  var endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,450);
  var c = new draw2d.Connection();
  c.setRouter(new draw2d.ManhattanConnectionRouter());
  c.setSource(startObj.getPort("output"));
  c.setTarget(endObj.getPort("input"));
  c.setTargetDecorator(new draw2d.BranchConnectionDecorator());
  c.setSourceDecorator(new draw2d.CrossConnectionDecorator());
  workflow.addFigure(c);

  // Add the start,end,connector to the canvas
  //
  var startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,550);
  var endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,600);
  var c = new draw2d.Connection();
  c.setRouter(new draw2d.NullConnectionRouter());
  c.setSource(startObj.getPort("output"));
  c.setTarget(endObj.getPort("input"));
  c.setTargetDecorator(new draw2d.PolygonConnectionDecorator());
  c.setSourceDecorator(new draw2d.CrossConnectionDecorator());
  workflow.addFigure(c);

</script>
</body>
</html>
